<template>
  <div>
    <qrcode-stream
      v-show="qrcode"
      :camera="camera"
      :torch="torchActive"
      @decode="onDecode"
      @init="onInit"
    >
      <div>
        <div class="qr-scanner">
          <div class="box">
            <div class="line"></div>
            <div class="angle"></div>
          </div>
          <div class="txt">
            将二维码/条码放入框内，即自动扫描111111111111111
          </div>
        </div>
      </div>
    </qrcode-stream>

    <!-- 提示语 -->
    <p class="error">{{ error }}</p>
    <p class="decode-result" v-if="this.error==''">Last result: <b>{{ result }}</b></p>
    <dev>
      <button @click="func">确定</button>
    </dev>

  </div>
</template>

<script>
//下载插件
//cnpm install --save  vue-qrcode-reader
//vue + 摄像头 + 二维码
//https://www.jianshu.com/p/227f2d5a05a3
import { QrcodeStream, QrcodeDropZone, QrcodeCapture } from 'vue-qrcode-reader'

export default {
  // 注册
  components: {
    QrcodeStream
  },
  data() {
    return {
      qrcode: true,
      torchActive: false, //手电筒
      camera: 'auto',// front, rear, auto, off,
      error:'',
      result:""
    };
  },

  methods: {
    // func (){
    //   debugger
    //   const userId=Math.floor(Math.random()*3);
    //   this.$router.push({path: 'variety/cuisine/index',query:{ index:this.result,userId}});
    // },
    onDecode(result) {
      const userId=Math.floor(Math.random()*3);
      //this.$emit('success', result);
      //alert(result)
      this.result = result;
      console.log(result)
      this.$router.push({path: '/variety/cuisine',query:{ index:this.result,userId}});
    },
    async onInit(promise) {
      try {
        const { capabilities } = await promise;
        const TORCH_IS_SUPPORTED = !!capabilities.torch;
        await promise;
      } catch (error) {
        if (error.name === 'NotAllowedError') {
          this.error = 'ERROR: 您需要授予相机访问权限';
        } else if (error.name === 'NotFoundError') {
          this.error = 'ERROR: 这个设备上没有摄像头';
        } else if (error.name === 'NotSupportedError') {
          this.error = 'ERROR: 所需的安全上下文(HTTPS、本地主机)';
        } else if (error.name === 'NotReadableError') {
          this.error = 'ERROR: 相机被占用';
        } else if (error.name === 'OverconstrainedError') {
          this.error = 'ERROR: 安装摄像头不合适';
        } else if (error.name === 'StreamApiNotSupportedError') {
          this.error = 'ERROR: 此浏览器不支持流API';
        }

        console.log(this.error)
      }
    }
  },
};
</script>
<style scoped>
.cameraMessage {
  width: 50%;
  height: 50px;
}
.qr-scanner {
  background-image: linear-gradient(
    0deg,
    transparent 24%,
    rgba(32, 255, 77, 0.1) 25%,
    rgba(32, 255, 77, 0.1) 26%,
    transparent 27%,
    transparent 74%,
    rgba(32, 255, 77, 0.1) 75%,
    rgba(32, 255, 77, 0.1) 76%,
    transparent 77%,
    transparent
  ),
  linear-gradient(
    90deg,
    transparent 24%,
    rgba(32, 255, 77, 0.1) 25%,
    rgba(32, 255, 77, 0.1) 26%,
    transparent 27%,
    transparent 74%,
    rgba(32, 255, 77, 0.1) 75%,
    rgba(32, 255, 77, 0.1) 76%,
    transparent 77%,
    transparent
  );
  background-size: 3rem 3rem;
  background-position: -1rem -1rem;
  width: 50%;
  /* height: 100%; */
  height: 50vh;
  /* height: 288px; */
  position: relative;
  background-color: #1110;

  /* background-color: #111; */
}
/* .qrcode-stream-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 82px;
  clear: both;
} */
.qrcode-stream-camera {
  width: 213px;
  height: 210px;
  clear: both;
  margin-top: 39px;
}
.qr-scanner .box {
  width: 50px;
  height: 50px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  border: 0.1rem solid rgba(0, 255, 51, 0.2);
  /* background: url('http://resource.beige.world/imgs/gongconghao.png') no-repeat center center; */
}
.qr-scanner .txt {
  width: 100%;
  height: 35px;
  line-height: 35px;
  font-size: 14px;
  text-align: center;
  /* color: #f9f9f9; */
  margin: 0 auto;
  position: absolute;
  top: 70%;
  left: 0;
}
.qr-scanner .myQrcode {
  text-align: center;
  color: #00ae10;
}
.qr-scanner .line {
  height: calc(100% - 2px);
  width: 50%;
  background: linear-gradient(180deg, rgba(0, 255, 51, 0) 43%, #00ff33 211%);
  border-bottom: 3px solid #00ff33;
  transform: translateY(-100%);
  animation: radar-beam 2s infinite alternate;
  animation-timing-function: cubic-bezier(0.53, 0, 0.43, 0.99);
  animation-delay: 1.4s;
}

.qr-scanner .box:after,
.qr-scanner .box:before,
.qr-scanner .angle:after,
.qr-scanner .angle:before {
  content: '';
  display: block;
  position: absolute;
  width: 3vw;
  height: 3vw;

  border: 0.2rem solid transparent;
}

.qr-scanner .box:after,
.qr-scanner .box:before {
  top: 0;
  border-top-color: #00ff33;
}

.qr-scanner .angle:after,
.qr-scanner .angle:before {
  bottom: 0;
  border-bottom-color: #00ff33;
}

.qr-scanner .box:before,
.qr-scanner .angle:before {
  left: 0;
  border-left-color: #00ff33;
}

.qr-scanner .box:after,
.qr-scanner .angle:after {
  right: 0;
  border-right-color: #00ff33;
}

@keyframes radar-beam {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(0);
  }
}
